<template>
    <div class="dialog">
        <el-dialog v-model="userStore.show" :title="userStore.getTitle" width="500px" :before-close="handleClose"
            destroy-on-close>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="140px"
                class="demo-ruleForm">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="ruleForm.account" type="text" autocomplete="off" placeholder="中文/abc/123" />
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="确认密码" prop="passA" v-if="!userStore.IsLogin">
                    <el-input v-model="ruleForm.passA" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item class="verifyBox" label="验证码" prop="verify" v-if="!userStore.IsLogin">
                    <el-input v-model="ruleForm.verify" maxlength="4" type="text" autocomplete="off" />
                    <verifyVue class="verify" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-if="userStore.IsLogin" @click="submitForm(ruleFormRef)">登录</el-button>
                    <el-button type="primary" v-else @click="submitForm(ruleFormRef)">注册</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重新输入</el-button>
                </el-form-item>
            </el-form>

            <span class="zxc" v-if="!userStore.IsLogin" @click="changeLR(true)">已有账号？点此去登录</span>
            <span class="zxc" v-else @click="changeLR(false)">没有账号？点此去注册</span>
        </el-dialog>
    </div>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useUserStore } from '../store/user';
import { useVerifyStore } from '../store/verify';
import type { FormInstance } from 'element-plus'
import verifyVue from './verify.vue';
import { login } from '../axios'

const userStore = useUserStore()
const verifyStore = useVerifyStore()

const changeLR = (k: boolean) => {
    userStore.showPop(k, true)
    resetForm(ruleFormRef.value)
}

const handleClose = () => {
    userStore.showPop(userStore.IsLogin, false)
}

const ruleFormRef = ref<FormInstance>()

const validateAccount = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        callback()
    }
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}
const validatePassA = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("两次密码不一致"))
    } else {
        callback()
    }
}
const validateVerify = (rule: any, value: string, callback: any) => {

    if (value === '') {
        callback(new Error('请输入验证码'))
    } else if (value.toLowerCase() !== verifyStore.registerImgCode.toLowerCase()) {
        callback(new Error("验证码错误"))
    } else {
        callback()
    }
}
const ruleForm = reactive({
    account: '',
    pass: '',
    passA: '',
    verify: ''
})

const rules = reactive({
    account: [{ validator: validateAccount, trigger: 'blur' }],
    pass: [{ validator: validatePass, trigger: 'blur' }],
    passA: [{ validator: validatePassA, trigger: 'blur' }],
    verify: [{ validator: validateVerify, trigger: 'blur' }]
})

// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    //表单校验
    formEl.validate((valid) => {
        if (valid) {
            // 发起接口请求
            login({ account: ruleForm.account, password: ruleForm.pass, islogin: userStore.IsLogin }).then((res) => {
                if (userStore.IsLogin) {
                    //保存token
                    userStore.setToken(res.data.token)
                    // 登录注册按钮隐藏
                    userStore.showPop(true, false)
                    userStore.showCreate(res.data.isAdmin)
                    userStore.setUsername(res.data.account)
                    resetForm(ruleFormRef.value)
                } else {
                    userStore.showPop(true, false)
                    resetForm(ruleFormRef.value)
                }
            })
        } else {
            return false
        }
    })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

.dialog {
    position: absolute;
    top: 100px;
    z-index: 999;
    display: flex;
    align-items: center;
    text-align: center;
}

.verifyBox {
    position: relative;
}

.verify {
    position: absolute;
    right: 120px;
}

.zxc {
    font-size: 14px;
}

.zxc:hover {
    cursor: pointer;
    color: blue;
}
</style>
<style>
.verifyBox .el-input {
    width: 75px;
}
</style>